import React, { useEffect, useRef, useState } from 'react'
import { ArrowLeft, OrdersO } from '@react-vant/icons';
import './tsteps.css'
import { useNavigate } from 'react-router-dom';
import * as echarts from 'echarts';
import { Popover, Space, Toast, Button } from 'react-vant';

export default function Tsteps() {
  const chartDom=useRef(null)
  const Navigate=useNavigate()

  const gauge=()=>{
    var myChart=echarts.init(chartDom.current)
    var option = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 240,
            splitNumber: 6,
            itemStyle: {
              color: '#0d9e03',
              shadowColor: 'rgba(0,138,255,0.45)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            progress: {
              show: true,
              roundCap: true,
              width: 6
            },
            pointer: {
              icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
              length: '60%',
              width: 16,
              offsetCenter: [0, '5%']
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 6
              }
            },
            axisTick: {
              splitNumber: 1,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            splitLine: {
              length: -10,
              lineStyle: {
                width: 3,
                color: '#008803'
              }
            },
            axisLabel: {
              distance: -30,
              color: '#999',
              fontSize: 20
            },
            // title: {
            //   show: false
            // },
            // detail: {
            //   backgroundColor: '#fff',
            //   borderColor: '#999',
            //   borderWidth: 2,
            //   width: '60%',
            //   lineHeight: 40,
            //   height: 40,
            //   borderRadius: 8,
            //   offsetCenter: [0, '35%'],
            //   valueAnimation: true,
            //   rich: {
            //     value: {
            //       fontSize: 50,
            //       fontWeight: 'bolder',
            //       color: '#777'
            //     },
            //     unit: {
            //       fontSize: 20,
            //       color: '#999',
            //       padding: [0, 0, -20, 10]
            //     }
            //   }
            // },
            data: [
              {
                value: 120
              }
            ]
          }
        ]
      };
      
      option && myChart.setOption(option);
  }

  useEffect(()=>{
    gauge()
  },[])

  return (
    <div>
      <div className='tsteps-head'>
        <span className='tsteps-head-bor'><ArrowLeft onClick={()=>{Navigate('/month')}} /></span>
        <span>设定目标</span>
        <span></span>
      </div>

      <div className='tsteps-content'>
        <div className='tsteps-content-bor'>
            <img src="./1.png" alt="" />
            <p>设定每日距离目标来帮助你</p>
            <p>保持活跃和健康</p>
            <div ref={chartDom} style={{height:'400px',width:'400px',margin:'0 auto'}}></div>
        </div>
      </div>

    </div>
  )
}
